<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sl-vue-tree</title>
  <link rel="stylesheet" href="../dist/sl-vue-tree-minimal.css">
  <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <script src="../dist/sl-vue-tree.js"></script>
</head>
<body>

<div id="app">

  <h2> Sl-vue-tree - minimal css</h2>

  <a href="./minimal-theme.html" target="_blank">Source code</a>


  <div class="row">
    <div class="tree-container">
      <sl-vue-tree v-model="nodes" :show-branches="true"></sl-vue-tree>
    </div>

    <div class="json-preview">
      <pre>{{ JSON.stringify(nodes, null, 4)}}</pre>
    </div>
  </div>


</div>

<script>
  var nodes = [
    {title: 'Item1', isLeaf: true},
    {title: 'Item2', isLeaf: true, data: { visible: false }},
    {title: 'Folder1'},
    {
      title: 'Folder2', isExpanded: true, children: [
        {title: 'Item3', isLeaf: true},
        {title: 'Item4', isLeaf: true},
        {
          title: 'Folder3', children: [
            {title: 'Item5', isLeaf: true}
          ]
        }
      ]
    },
    {title: 'Folder5', isExpanded: false},
    {title: 'Item6', isLeaf: true},
    {title: 'Item7', isLeaf: true, data: { visible: false }},
    {
      title: 'Folder6', children: [
        {
          title: 'Folder7', children: [
            {title: 'Item8', isLeaf: true},
            {title: 'Item9', isLeaf: true}
          ]
        }
      ]
    }
  ];

  new Vue({
    el: '#app',
    components: { SlVueTree: SlVueTree },
    data: function () {
      return {
        nodes: nodes,
        lastEvent: 'No last event'
      }
    }
  })
</script>

<style>

  body {
    background: #050d12;
    font-family: Arial;
    color: rgba(255, 255, 255, 0.5);
  }

  a {
    color: #bbb;
  }

  .row {
    display: flex;
    margin-bottom: 10px;
  }

  .tree-container {
    flex-grow: 1;
  }


  .json-preview {
    flex-grow: 1;
    margin-left: 10px;
    background-color: #13242d;
    border: 1px solid black;
    padding: 10px;
  }

</style>

</body>
</html>